<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>今日任务</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/index.css"/>
    <script src="./js/jquery.js"></script>
    <script src="lib/layer/layer.js"></script>
    <script src="js/base.js"></script>
    <script src="lib/vue/vue.min.js"></script>
    <script src="lib/vue/vue-resource.min.js"></script>
    <script src="./js/clipboard.min.js"></script>
    <link rel="stylesheet" href="./css/iconfont1.css"/>
    <!--<link rel = "import" href = "footer.html"/>-->
</head>
<script type="text/javascript">
    (function () {
        var deviceWidth = document.documentElement.clientWidth;
        if (deviceWidth > 640) deviceWidth = 640;
        document.documentElement.style.fontSize = deviceWidth / 6.4 + 'px';
    }());
</script>
<body>
<div class="perCenter" id="app">
    <div class="per_left">
        <p><span class="bottom_color">首页</span> > <span>个人中心</span></p>
        <div class="data">
            <div class="photo">
                <img :src="info.real_avatar" alt=""/>
                <p>{{info.name}}</p>
            </div>
            <ul class="name">
                <a href="./task_center.html"><li class="person"><i class="icon iconfont icon-zhengjianhao-copy"></i>任务中心</li></a>
                <a href="./myVirtual.html"><li><i class="icon iconfont icon-zhuji2"></i>我的虚拟机</li></a>
                <a href="./personalData.html"><li><i class="icon iconfont icon-gerenziliao"></i>个人资料</li></a>
                <a href="./invitedShare.html"><li> <i class="icon iconfont">&#xe690;</i>邀请分享</li></a>
                <a href="./password.html"><li> <i class="icon iconfont icon-xiugaimima"></i>修改密码</li></a>
            </ul>
        </div>
    </div>
    <div class="task" >
        <p class="consume"><a href="./usageRecord.html"><span class="bottom_color">消费明细</span></a> <i></i> <span class="ruleEgg">U币规则</span></p>
        <div class="min_bg"><img src="./images/nest.png" alt=""/><b>拥有 <span>{{nest}}</span> 枚U币</b></div>
        <div class="today_task">
            <p class="perTitle"><i></i><span>今日任务</span></p>
            <ul>
                <li v-for="ta in task">
                    <div class="icon"><img :src="ta.icon_path" alt=""/><i></i><span>{{ta.name}}</span></div>
                    <div class="sulg"><span>+{{ta.reward}}</span>U币</div>
                    <div class="fished">
                        <input v-if="ta.is_finished == false" @click="finish(ta.slug,ta.component)" type="button" value="去完成"/>
                        <input v-if="ta.is_finished == true" style="background-color: #c7c7c7;cursor: not-allowed" type="button" value="已完成" disabled/>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="popup" id="question" style="display: none">
        <div class="popup_vanish"></div>
        <div class="popupN">
            <div class="feed">
                <p>用户意见和反馈</p>
                <textarea id="text"></textarea>
                <div class="Btn" @click="feedSubmit()"><button >提交</button></div>
            </div>
        </div>
    </div>
</div>
<div class="popup" id="inviteT" style="display: none">
    <div class="popup_vanish"></div>
    <div class="popupN">
        <div class="copyContent" id="copyContent"></div>
        <p class="copyT">复制上面内容发送给好友，好友成功注册后即可获得U币</p>
        <div class="Btn"><button class="btn" data-clipboard-action="copy" data-clipboard-target="#copyContent">复制</button></div>
    </div>
</div>
<div class="popup" id="signSu" style="display: none">
    <div class="popup_vanish"></div>
    <div class="popupN">
        <div class="sign_s">
            <div class="signT">签 到 成 功</div>
            <img src="./images/success.png" alt=""/>
            <p class="signS">签到成功 U币 <span class="organColor">+1</span></p>
            <div class="Btn"><button class="signSuccess">确定</button></div>
        </div>
    </div>
</div>
<div class="popup" id="nest" style="display: none">
    <div class="popup_vanish"></div>
    <div class="popupN" style="padding: 0">
        <p style="padding: 20px 0;border-bottom: 1px solid #dfdfdf;text-align: center;font-size: 18px;"><b>U币使用规则</b></p>
        <div class="nestG" style="padding: 30px">
            <div class="eggRule">
                <span class="num">1</span>
                <div>
                    <b>U币是用来做什么的？</b>
                    <p>U币可以用来体验虚拟机，<span class="bottom_color">一个U币可以体验10分钟。</span></p>
                </div>
            </div>
            <div class="eggRule">
                <span class="num">2</span>
                <div>
                    <b>如何获取U币？</b>
                    <p><span class="bottom_color">完成系统任务</span>可以获取对应数量的U币。</p>
                </div>
            </div>
            <div class="Btn" style="margin-top: 40px"><button class="signSuccess">确定</button></div>
        </div>
    </div>
</div>
<div id = "footer"></div>
</body>
<script>
    (function () {
        var app = new Vue({
            el: '#app',
            data: function () {
                return{
                    task: [],
                    recom: [],
                    news: [],
                    nest:'',
                    info:''

                }
            },
            mounted: function () {
                this.showData();
//需要执行的方法可以在mounted中进行触发，其获取的数据可以赋到data中后，可以放在前面进行渲染
            },
            methods: {
                showData:function () {
                    var _this = this;
                    get(url + 'user/info', {}).then(
                            function (res) {
                                if (res.body.code == 101) {
                                    tip(res.body.msg);
                                    location.href = './login.html'
                                } else if (res.body.code == 400) {
                                    tip(res.body.msg);
                                } else {
                                    _this.info = res.body.data
                                }
                            }, function (reason) {
                                tip('请求错误')
                            });
                    get(url + 'task', {type:1})
                            .then(function (res) {
                                if (res.body.code == '101') {
//                                    tip(res.body.msg)
                                    location.href = './login.html'
                                } else {
                                    _this.task = res.data.data.lists
                                }
                            }, function (reason) {
                                tip('请求错误')
                            });
                    get(url + 'user/wallet', {}).then(
                            function (res) {
                                if (res.body.code == 101) {
                                    tip(res.body.msg);
                                    location.href = './login.html'
                                } else if (res.body.code == 400) {
                                    tip(res.body.msg);
                                } else {
                                    _this.nest = res.data.data.point;
                                    console.log(res.data.data)
                                }
                            }, function (reason) {
                                tip('请求错误')
                            });
                }
                ,finish:function(slug,component){
                    let _this =this;
                    get(url + 'task/check/'+slug , {})
                            .then(function (res) {
                                if (res.body.code == '200') {
                                    if(res.body.data.is_finished == false){
                                        switch (component){
                                            case 'invite':
                                                _this.invite(slug);
                                                break;
                                            case 'sign':
                                                _this.sign(slug);
                                                break;
                                            case 'feed-back':
                                                _this.feedBack(slug);
                                                break;
                                        }
                                    }else{
                                        tip('此任务已完成，请勿重复')
                                    }
                                } else {
                                    _self.task = res.data.data.lists
                                }
                            }, function (reason) {
                                tip('请求错误')
                            });
                },
                invite:function(slug){
                    let _this =this
                    get(url+'task/inviteContent/invite',{}).then(
                            function(res){
                                if(res.body.code==101){
                                    tip(res.body.msg);
                                    location.href = './login.html'
                                }else if(res.body.code==400){
                                    tip(res.body.msg);
                                }else{
                                    $('#inviteT').css('display','block')
                                    _this.showData();
                                    $('#copyContent').html(res.body.data.content)
                                }
                            }, function (reason) {
                                tip('请求错误')
                            });
                },
                sign:function(sulg){
                    let _this = this
                    post(url + 'task/exec/sign', {})
                            .then(function (res) {
                                if (res.body.code == '101') {
                                    tip(res.body.msg)
                                    location.href = './login.html'
                                }else if(res.body.code==400){
                                    tip(res.body.msg);
                                }else{
                                    _this.showData();
                                    $('#signSu').css('display','block')
                                    console.log(res.body.data.content)
                                }
                            }, function (reason) {
                                tip('请求错误')
                            });
                },
                feedBack:function(sulg){
                    $('#question').css('display','block')
                },
                feedSubmit:function(){
                    let _this =this
                    var cont = $('#text').val()
                    post(url + 'crm/feed-back', {content:cont})
                            .then(function (res) {
                                if (res.body.code == '101') {
                                    tip(res.body.msg)
                                    location.href = './login.html'
                                }else if(res.body.code==400){
                                    tip(res.body.msg);
                                }else{
                                    _this.showData();
                                    $('#question').css('display','none')
                                }
                            }, function (reason) {
                                tip('请求错误')
                            });
                },
                feedBacka:function(){
                    console.log('///')
                }
            }
        })
    })()
    $('#footer').load("./footer.html")
    $('.popup_vanish').click(function(){
        $('.popup').css('display','none')
    })
    $('.signSuccess').click(function(){
        $('.popup').css('display','none')
    })
    $('.ruleEgg').click(function(){
        $('#nest').css('display','block')
    })
    var clipboard = new Clipboard('.btn');
    clipboard.on('success', function(e) {
        alert('复制成功，快去分享吧')
        $('.popup').css('display','none')
    });
    clipboard.on('error', function(e) {
        console.log(e);
    });

</script>

</html>